<template>
    <div class="container">
        <div class="rule-button" v-show="rankingShow">
            <van-button round size="small" type="primary" @click="showRank">查看排行榜</van-button>
        </div>
        <img style="width: 100%;" :src="activityDefaultUrl" v-show="!posterShow">
        <img style="width: 100%;" :src="posterUrl" v-show="posterShow"/>
        <div style="padding-top: 20px;"></div>
        <div style="border:1px solid #cecece;" v-show="posterShow">
            <div class="prompt" >
                <div class="title" v-show="posterShow">分享流程</div>
                <!--style="padding:5px 15px;"-->
                <section >1、长按上方海报，选择 "发送给朋友" 、 "保存相册"分享给其他朋友 ；</section>
                <section > 2、选择需要发送的微信好友、直接分享到微信朋友圈 ；</section>
                <section > 3、点击 "发送" 按钮，即可分享成功。</section>
            </div>
        </div>

        <div style="padding-top: 20px;"></div>
        <van-cell-group>
            <van-cell title="邀请记录" is-link to="recommend_his"/>
        </van-cell-group>
        <van-cell-group>
            <van-cell title="中奖记录" is-link to="recommend_schedule"/>
        </van-cell-group>
        <!--<occupy-block/>-->
        <padding-bottom/>
        <van-popup v-model="rankDetail" >
            <img @click="showRank" src="/images/ticket_close.png" class="ticket_close ruleTitleImg">
            <div class="rankTitle">
                <li style="height: 28px;">名次</li>
                <li style="height: 28px;">姓名</li>
                <li style="height: 28px;">助力人数</li>
            </div>
            <div class="wheel_lottery_module">
                <div class="winning_list_wrap ">
                    <div class="winning_list jdui_slide">
                        <vue-seamless-scroll :data="listData" :class-option="classOption">
                            <ul class="jdui_slide_list ">
                                <li style="height: 28px;" v-for="item in listData">
                                    <span>{{item.id}}</span><span>{{item.userName}}</span><span>{{item.count}}</span>
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
        </van-popup>
        <!-- <van-cell-group v-show="posterShow">
            <van-cell title="选择收货地址" is-link @click="toRecommendAddress()"/>
        </van-cell-group> -->
    </div>
</template>

<script>
    import Vue from 'vue'
    import {escape2Html} from '../../utils/tools'
    import {Loading, Toast, Dialog, Button} from 'vant';
    import Cookies from 'js-cookie';
    import {isDev} from "@/utils/tools";
    import scroll from 'vue-seamless-scroll';

    Vue.use(Loading);
    Vue.use(Button);
    Vue.use(scroll);
    export default {
        name: "recommendActivity",
        data() {
            return {
                isDev: isDev,
                posterShow: false,
                posterUrl: '',
                activityId: '',
                activityDefaultUrl: '/images/activityDefault.png',
                rankingShow: false,//后台配置是否显示排行榜
                rankDetail: false, //排行榜弹窗开关
                listData: [{}]//排行榜数据
                // activityDefaultUrl: 'http://guijiwenhua.oss-cn-hangzhou.aliyuncs.com/20190421/6991548bf259473d85a2fcd1b629f06e.png'
            }
        },
        created() {

        },
        mounted() {
            this.createPoster();
        },
        computed: {
            classOption () {
                return {
                    step:0.5,
                    hoverStop: false,
                    openTouch: false
                }
            }
        },
        methods: {
            toRecommendAddress() {
                this.$router.push({
                    path: "/recommend_address",
                    query: {
                        activityId: this.activityId,
                        operation:'select',
                    }
                });
            },
            createPoster() {
                this.token = Cookies.get("token")
                const toast = Toast.loading({
                    duration: 0,       // 持续展示 toast
                    forbidClick: true, // 禁用背景点击
                    loadingType: 'spinner',
                });
                this.$api.personInf.recommendActivityCreatePoster({openId: this.token}).then(res => {
                    if (res.code == 0) {
                        this.posterShow = true;
                        this.posterUrl = res.data.qrPosterUrl;
                        this.activityId = res.data.activityId;
                        this.rankingShow = res.data.rankingShow;
                        console.log(res.data)
                        document.title = escape2Html(res.data.activityName);
                    } else if (res.code == 3 || res.code == 4) {
                        console.log(res)
                    } else {
                        Toast(res.msg);
                        this.posterShow = false;
                    }
                }).catch(err => {
                    console.log(err)
                }).finally(()=>{
                    toast.clear()
                })
            },
            showRank(){
                this.rankDetail = !this.rankDetail
                if(this.rankDetail){
                    const toast = Toast.loading({
                        duration: 0,       // 持续展示 toast
                        forbidClick: true, // 禁用背景点击
                        loadingType: 'spinner',
                    });
                    this.$api.personInf.recommendActivityRanking({activityId: this.activityId}).then(res => {
                        if (res.code == 0) {
                            this.listData = res.data;
                        } else {
                            Toast(res.msg);
                            this.posterShow = false;
                        }
                    }).catch(err => {
                        console.log(err)
                    }).finally(()=>{
                        toast.clear()
                    })
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .container {
        background-color: #f3f3f3;
        min-height: 100%;
        padding: 14px;
        .title {
            color: #2C2C2C;
            font-size: 18px;
            /*padding: 0 10px 10px 20px;*/
        }
        .prompt {
            background-color: #FFFFFF;
            padding: 10px 15px;
            font-size: 14px;
            color: #475057;
            line-height: 25px;
        }
    }

    .rule-button {
        position: absolute;
        right: 5%;
        top: 3%;
    }

    .van-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        max-height: 400px;
        overflow-y: auto;
        background-color: #d20046;
        -webkit-transition: .3s ease-out;
        transition: .3s ease-out;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translate3d(-50%,-50%,0);
        transform: translate3d(-50%,-50%,0);
        width: 90%;

    }

    .jdui_slide {
        height: auto;
    }

    .wheel_lottery_module {
        position: relative;
        background-color: #d20145;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .wheel_lottery_module .winning_list_wrap {
        position: relative;
        padding-top: 51.6%;
        margin-top: -1px;
    }

    .wheel_lottery_module img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .wheel_lottery_module .winning_list_wrap .winning_list {
        position: absolute;
        bottom: 7%;
        left: 8.67%;
        width: 82.67%;
        height: 93.29%;
        overflow: hidden;
    }

    .wheel_lottery_module .winning_list_wrap .winning_list .jdui_slide_list  {
        width: 100%;
        height: 100%;
    }

    .jdui_slide .jdui_slide_list {
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
    }

    .wheel_lottery_module .winning_list_wrap .winning_list .jdui_slide_list >li {
        display: block;
        height: 25%;
    }

    .wheel_lottery_module .winning_list_wrap .winning_list .jdui_slide_list >li>span:nth-child(3n+1) {
        width: 20%;
        text-align: center;
    }

    .wheel_lottery_module .winning_list_wrap .winning_list .jdui_slide_list >li>span {
        display: -webkit-box;
        font-size: 14px;
        color: #fff;
        float: left;
        height: 19px;
        line-height: 19px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }

    .wheel_lottery_module .winning_list_wrap .winning_list .jdui_slide_list >li>span:nth-child(3n) {
        width: 20%;
        text-align: right;
    }

    .wheel_lottery_module .winning_list_wrap .winning_list .jdui_slide_list >li>span:nth-child(3n+2) {
        width: 60%;
        font-size: 14px;
        text-align: center;
    }

    .ruleTitle{
        padding-top: 5px;
        text-align: right;
        height: 28px;
        border-bottom: 1px solid #7d7e80;
    }

    .ruleTitleImg {
        width: 40px;
        position: relative;
    }

    .rankTitle{
        width: 101%;
        overflow: hidden;
    }

    .rankTitle>li {
        display: -webkit-box;
        font-size: 14px;
        color: #fff;
        float: left;
        height: 19px;
        line-height: 19px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
        width: 33%;
        text-align: center;
    }
</style>
